<template>
    <div class="flex box_cont">
        <!--  -->
        <div class="box_cont topic_cont flex_column_between" style="position: relative; flex: 1;" :style="{width: questions.length > 0 ? '65%' : '100%'}" ref="boxfull" v-loading="loading">
            <audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none"></audio>
            <img class="backhover" @click="$router.go(-1)" src="@/assets/img/back.png" style="position: absolute; left: 15px; top: 10px; z-index: 10; width: 3rem; height: 3rem;" />
            <div class="tit_cont">
                <div class="font36 bold">关卡{{ article && article.sort || ''}}：{{ article && article.title || '' }}</div>
                <div class="w-full level_cont flex_center_between">
                    <div class="flex_center level_row font20 ">
                        <div class="flex_center_between" v-if="article">
                            <img v-for="i in article.difficultyRate" class="level_icon" src="@/assets/img/collect_3.png" :key="i"/>
                            <template v-if="article.difficultyRate < 5">
                                <img v-for="i in 5 - article.difficultyRate" class="level_icon" src="@/assets/img/collect.png" :key="'e' + i"/>
                            </template>
                        </div>
                    </div>
                    <div class="print_cont flex_c_c font20 themeFont cur" @click="printFun">
                        <img class="icon" src="@/assets/img/print_3.png" />
                          打印
                    </div>
                </div>
            </div>
    
            <!-- 文章内容  -->
            <template v-if="article?.sentence.length">
                <div v-if="article?.sentence.length" style="width: 100%; padding: 0 14rem;  flex: 1; min-height: 0; display: flex; flex-direction: column;">
                    <div style="flex: 1; height: 100%; overflow: auto">
                        <div style="display: flex; flex-wrap: wrap;">
                                <div class="wordlistitem" @mouseup.stop="onmouseup($event)" v-for="item,index in article.sentence">
                                    <div class="word_text" style="display: inline-block" v-html="item.sentence"></div>
                                    <div style="display: flex; cursor: pointer; display: inline-block; margin-bottom: -1rem;" @click="playAudio(item.voiceFile, index)">
                                        <div style="position: relative; width: 40px; height: 40px; border-radius: 100%; border: 2px solid rgb(32 207 27); transform: scale(0.5); display: flex; align-items: center;">
                                            <c_audio :actived="childIndex === index ? true : false" style="position: absolute; left: 6px;" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </template>
            <empty type="1" text="暂无内容" v-else />
    
            <div class="btn_cont flex_center_between">
                <!-- <p class="left_num flex_center"> 
                    <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;margin-right: 10px;" type="warning" @click="articlePlayAudio()">
                        <div class="flex_c_c"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/play_1.png" />{{ playStatus ? '取消' : '点读' }}</div> 
                    </el-button>
                    <audio style="width: 56rem;" :src="article.voiceFile ? article.voiceFile.url : ''" controls ref="audioArticle" @ended="articlePlayEnd" v-if="playStatus" controlsList="nodownload" autoplay></audio>
                </p> -->
                <div class="flex-1 flex justify-end">
                    <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning" @click="wordShow" v-if="!wordShowStatus">
                        <div class="flex_c_c"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sc.png" /> 生词</div> 
                    </el-button>
                    <el-button style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="primary" @click="wordHide" v-if="wordShowStatus">  
                        <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/zt.png"/> 隐藏</div> 
                    </el-button>
                    <el-button id="fullscreen_button" style="width: 12rem;font-size:2rem;padding: 1.1rem 3rem;" type="warning" @click="rememberWord">
                        <div class="flex_c_c cur"><img style="margin-right: 12px;width: 3rem" src="@/assets/img/sj.png" /> 识记</div> 
                    </el-button>
                </div>
            </div>
        </div>
    
        <!-- 答题 -->
        <div class="answer_cont flex flex-column" v-if="questions.length > 0">
            <div class="w_full answer_tit flex_center">
                <div class="title flex_c_c">
                    <img class="icon" src="@/assets/img/time_1.png" />
                    <span class="text">{{ exercise && exercise.useTime }}</span>
                </div>
            </div>
            <div class="head_cont cur" @mouseup.stop="onmouseup_word($event)">
                <span class="tag font24"><span class="font32">{{ questionIndex + 1 }}</span>/{{ questions.length }}</span>      
                {{ question && question.stem || ''}}
            </div>
            <!-- 选项 -->
            <div class="flex_center option_row font32 cur" v-for="(item, index) in question.option" :class="{status: question && question.answer && checkOptionChoose(item), wrong: question && question.answer && !checkOptionRight(item) && checkOptionChoose(item)}" :key="index">
                <div>
                    <div class="option flex_c_c font-26" :class="{status1: question && question.answer && checkOptionChoose(item), wrong: question && question.answer && !checkOptionRight(item) && checkOptionChoose(item)}">{{ item.prefix }}</div>
                </div>
                <p class="word_text" @mousedown="mouseDownFn" @mouseup.stop="onmouseup_word($event)"  @dblclick="onmouseup_word()">{{ item.content }}</p>
            </div>
            <div class="work_cont">
                <p class="font24"><span class="bold">正确答案：</span>{{ question && question.rightAnswer.join(',') }}</p>
                <p class="font20 text"><span class="bold">详细解析：</span> {{ question && question.analysis || '暂无' }}</p>
            </div>
            <div class="flex-1 flex justify-end" style="margin-top: 1.8rem;">
                <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" v-if="questionIndex > 0" @click="prevQuestion">  
                        上一题
                </el-button>
                <el-button style="width: 14rem;font-size:2rem;padding: 1.1rem 3rem;height: 5.4rem;" type="primary" v-if="questionIndex < questions.length" @click="nextQuestion">  
                        下一题
                </el-button>
            </div>
        </div>
    
        <!-- 文章单词弹窗 -->
        <div class="modal_cont" v-if="wordPop" @click="closeWordPop(1)">
             <div class="info_cont" :style="{top:infoTop+'px',left:infoLeft+'px'}">
                <div class="word bold font32">{{ infoword }}</div> 
                <div class="word_btn font22 cur" @click.stop="addWordFun(infoword, 1)" v-loading="addWordLoading">+  加入生词</div>
            </div>
        </div>
    
        <!-- 题目选项单词弹窗 -->
        <div class="modal_cont" v-if="questionWordPop" @click="closeWordPop(2)">
            <div class="window_cont" ref="myElement" :style="{top:wtop+'px',left:wleft+'px'}" v-loading="wordTranslateLoading">
                <div class="word bold font32 flex_center cur">
                    {{ word }}  
                    <img class="play_icon" src="@/assets/img/play_2.png" @click.stop="playAudio(2)"/>
                </div>
                <div class="font24 word_meaning" v-html="wordTranslate.translation"></div> 
                <div class="wordbtn_cont flex_center_between">
                    <div class="word_btn font22 cur" @click.stop="addWordFun(word, 2)">+  加入生词</div>
                    <div class="word_btn font22 bl cur" @click.stop="jumpYoudao(word)">详细解释</div>
                </div>
            </div>
        </div>
    
    </div>
    </template>
    
    <script>
    import { exerciseInfo } from '@/api/articleExercise.js'
    import { article } from '@/api/courseArticle.js'
    import { wordList, addWord, wordTranslate } from '@/api/articleWord.js'
    import config from '@/config/index.js'
    import c_audio from '../components/audio.vue'
    export default {
        components: {
            c_audio
        },
        props: {
            bearRef: {
                type: Object,
                default: () => ({})
            }
        },
        data() {
            return {
                loading: false,
                addWordLoading: false,
                wordTranslateLoading: false,
                wordShowStatus: false,
                questionWordPop: false,
                questionShow: false, // 是否显示题目
                articleId: 0,
                exerciseId: 0,
                userId: 0,
                article: null,
                exercise: {},
                playStatus: false,
                voiceUrl: '',
                wordsList: [],
                infoTop: 0,
                infoLeft: 0,
                wtop: 0,
                wleft: 0,
                wordPop: false,
                infoword: '',
                word: '',
                firstTime: '',
                lastTime: '',
                isClick: true,
                wordTranslate: {},
                questionIndex: 0,
                question: {}, // 当前题目
                questions: [], // 所有题目
                questionAnswer: {},
                childIndex: null
            }
        },
        created() {},
        mounted(){
            this.exerciseId = this.$route.query.exerciseId || 0
            this.userId = this.$route.query.userId || 0
            this.articleId = this.$route.query.articleId || 0
            this.getExercise()
            this.getWordList()
        },
        methods:{
            getExercise() {
                this.loading = true
                exerciseInfo({id: this.exerciseId, userId: this.userId}).then(res => {
                    if (res.error == 0) {
                        this.exercise = res.data
                        let useTime = res.data ? res.data.useTime : 0
                        this.exercise.useTime = this.formatUseTime(useTime)
    
                        this.questionAnswer = {}
                        res.data.log.answer.forEach(item => {
                            this.questionAnswer[item.id] = {
                                score: Number(item.mark.score),
                                status: item.mark.isRight,
                                data: item.answer,
                            }
                        });
                        this.getArticle()
                        
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            //获取文章详情
            getArticle() {
                this.loading = true
                article({id: this.articleId, userId: this.userId}).then(res => {
                    this.loading = false
                    if (res.error == 0) {
                        this.article = res.data
                        let questions = []
                        res.data.questions.forEach(item => {
                            item.answer = this.questionAnswer[item.id] ? this.questionAnswer[item.id] : null
                            questions.push(item)
                        })
                        this.questions = questions
                        this.question = this.questions[this.questionIndex]
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            // 加入生词
            addWordFun(word, type) {
                if (!word) {
                    this.$message.error({ el: this.bearRef.$el, message: '请选择要加入的单词' })
                    return
                }
    
                word = word.trim()
                
                // 判断word是否是英文单词
                let reg = /^[a-zA-Z]+$/;
                if (!reg.test(word)) {
                    this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                    return
                }
                if (type == 1) {
                    this.addWordLoading = true
                }else if (type == 2) {
                    this.wordTranslateLoading = true
                }
                addWord({articleId: this.articleId, word: word, userId: this.userId}).then(res => {
                    if (res.error == 0) {
                        this.$message.success({ el: this.bearRef.$el, message: '加入成功' })
                        if (type == 1) {
                            this.wordPop = false
                        }else {
                            this.questionWordPop = false
                        }
                        window.getSelection().removeAllRanges();
                        this.getWordList()
                    }
                }).finally(() => {
                    if (type == 1) {
                        this.addWordLoading = false
                    }else if (type == 2) {
                        this.wordTranslateLoading = false
                    }
                })
            },
            getWordList() {
                wordList({articleId: this.articleId, userId: this.userId}).then(res => {
                    if (res.error == 0) {
                        let words = []
                        res.data.forEach(item => {
                            words.push(item.word)
                        })
                        this.wordsList = words
                    }
                })
            },
            //点击播放
            playAudio(url,index) {
                // this.voiceUrl = this.wordTranslate.voiceUrl
                this.voiceUrl = url
                this.childIndex = index
                this.article.sentence[index].playStatus = true
                this.$nextTick(() => {
                    this.$refs.audio.play()
                })
            },
            playEnd() {
                this.voiceUrl = ''
                this.childIndex = ''
            },
            // 文章播放
            articlePlayAudio() {
                if (this.playStatus) {
                    this.$refs.audio.pause()
                    this.playStatus = false
                    return
                }
                if (this.article.status && this.article.status.value == 2) {
                    this.$message.warning({ el: this.bearRef.$el, message: '文章音频正在转换中，请稍等下再播放' })
                    return 
                }
                this.playStatus = true
                this.$refs.audioArticle.play()
            },
            // 文章播放结束
            articlePlayEnd() {
                this.playStatus = this.playStatus ? false : this.playStatus
            },
            //隐藏生词
            wordHide(){
                this.wordShowStatus = false
                this.article.sentence.forEach(item => {
                    item.sentence = item.sentence.replace(/<span class="tagword">/g, '')
                    item.sentence = item.sentence.replace(/<\/span>/g, '')
                })
                // this.article.content = this.article.content.replace(/<span class="tagword">/g, '')
                // this.article.content = this.article.content.replace(/<\/span>/g, '')
            },
            //显示生词
            wordShow(){
                if (this.wordsList.length == 0) {
                    this.$message.error({ el: this.bearRef.$el, message: '暂无已加入的生词' })
                    return
                }
                this.wordShowStatus = true
                this.wordsList.forEach(item => {
                    this.article.sentence.forEach(bb => {
                        bb.sentence = bb.sentence.replace(new RegExp(item,"g") , '<span class="tagword">'+item+'</span>') 
                    })
                    console.log(this.article.sentence)
                    // let str = this.article.content.replace(new RegExp(item,"g") , '<span class="tagword">'+item+'</span>') 
                    // this.article.content = str
                })
            },
            // 识记生词
            rememberWord() {
                let path = '/reading/remember?exerciseId=' + this.exerciseId + '&articleId=' + this.articleId 
                if (this.userId) {
                    path += '&userId=' + this.userId
                }
                this.$router.push(path)
            },
            // 跳转有道词典
            jumpYoudao(word) {
                let url = 'https://dict.youdao.com/result?word=' + word + '&lang=en'
                window.open(url)
            },
            checkOptionChoose(option) {
                // 判断当前选项是否被选中
                let answer = this.question.answer.data || []
                let index = answer.findIndex(item => item == option.prefix)
                return index >= 0 ? true : false
            },
            checkOptionRight(option) {
                // 判断选项是否正确
                let answer = this.question.answer.data || []
                let rightAnswer = this.question.rightAnswer || []
                let index = answer.findIndex(item => item == option.prefix)
                let rightIndex = rightAnswer.findIndex(item => item == option.prefix)
                return index >= 0 && rightIndex >= 0 ? true : false
            },
            // 详情词汇
            onmouseup () {
                if (window.getSelection) {
                    this.infoTop = 0
                    this.infoLeft = 0
                    let text = window.getSelection().toString().trim(); //选中文字
                    if(!text.trim()) {
                        this.wordPop = false
                        return 
                    }
                    let {left,top, height, width} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                    
                    this.infoword = text
                    this.infoTop = top + 70
                    this.infoLeft = left 
                    this.wordPop = true
                } else if (document.selection && document.selection.type != "Control") {      
                    //ie9以下的支持，可不考虑
                    $scope.mark.selectionText[0] = document.selection.createRange().text;
                }
            },
            mouseDownFn(){
                this.firstTime = new Date().getTime()
            },
            // 选项词汇
            onmouseup_word(e) {
                this.lastTime = new Date().getTime()
                if (window.getSelection) {
                    this.wtop = 0
                    this.wleft = 0
                    let text = window.getSelection().toString().trim(); //选中文字
                    // 鼠标点击和抬起的时间差<200，或者选中文本为空时，可以触发点击
                    if((this.lastTime - this.firstTime) < 200 || text === ''){
                        this.isClick = true
                    } else {
                        this.isClick = false
                    }
                    if(!text.trim()) {
                        this.questionWordPop = false
                        return 
                    }
    
                    // 判断text是否是英文单词
                    let reg = /^[a-zA-Z]+$/;
                    if (!reg.test(text)) {
                        this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                        return
                    }
                    let start = window.getSelection().anchorOffset; //开始位置
                    let end = window.getSelection().focusOffset;  //结束位置
                    // let {left,top,height,width} = window.getSelection().getRangeAt(0).getBoundingClientRect()
    
                    // console.log('rect',window.getSelection().getRangeAt(0).getBoundingClientRect())
                    // this.word = text
                    // this.wtop = top + 70
                    // this.wleft = left 
    
                    let {left,top,right} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                    this.word = text
    
                    this.wtop = top + 70
                    this.wleft = left 
                    this.questionWordPop = true
                    let w = 0
                    let winWidth =window.innerWidth
                    this.$nextTick(()=>{
                        w = this.$refs.myElement.offsetWidth
                        if((right+w)>winWidth){
                            this.wleft =  winWidth - w
                        }
                    })

                    this.getWordTranslate(this.word)
                    
                } else if (document.selection && document.selection.type != "Control") {      
                    //ie9以下的支持，可不考虑
                    $scope.mark.selectionText[0] = document.selection.createRange().text;
                }
            },
             // 获取单词翻译
            getWordTranslate(word) {
                if (!word) {
                    this.$message.error({ el: this.bearRef.$el, message: '请选择单词' })
                    return
                }
                // 判断word是否是英文单词
                let reg = /^[a-zA-Z]+$/;
                if (!reg.test(word)) {
                    this.$message.error({ el: this.bearRef.$el, message: '请选择英文单词' })
                    return
                }
                if (this.wordTranslateLoading) return
                this.wordTranslateLoading = true
                wordTranslate({word: word}).then(res => {
                    this.wordTranslateLoading = false
                    if (res.error == 0) {
                        this.wordTranslate = res.data
                        this.$nextTick(()=>{
                            try {
                                let {bottom} = window.getSelection().getRangeAt(0).getBoundingClientRect()
                                let winHeight =window.innerHeight
                                if(this.$refs.myElement){
                                    let h = this.$refs.myElement.offsetHeight
                                    if((bottom+h+70)>winHeight){
                                        this.wtop = winHeight - h
                                    }
                                }
                            } catch (error) {
                                console.log(error)
                            }
                        })
                    }
                }).finally(() => {
                    this.wordTranslateLoading = false
                })
            },
            // 下一题
            async nextQuestion() {
                if (this.questionIndex < this.questions.length - 1) {
                    this.questionIndex++
                    this.question = this.questions[this.questionIndex]
                }
            },
            // 上一题
            prevQuestion() {
                if (this.questionIndex > 0) {
                    this.questionIndex--
                    this.question = this.questions[this.questionIndex]
                }
            },
            closeWordPop(type){
                if (type == 1) {
                    this.wordPop = false
                }else {
                    this.questionWordPop = false
                }
                window.getSelection().removeAllRanges();
            },
            // 将time转换成分秒
            formatUseTime(useTime) {
                if (useTime) {
                    // 将秒转换成分秒
                    let m = parseInt(useTime / 60)
                    let s = useTime % 60
                    m = m < 10 ? '0' + m : m
                    s = s < 10 ? '0' + s : s
                    useTime = m + ':' + s
                }
                return useTime
            },
             // 打印
            printFun() {
                let url = config.basePrintUrl + '/article?id=' + this.articleId
                window.open(url)  
            }
        }
    }
    </script>
    
    <style lang="scss" scoped>
    @import "~@/styles/mixins.scss";
    .wordlistitem{
            background-color: #e8ebff;
            color: #27369c;
            border-radius: 10px;
            font-size: 3.6rem;
            margin: 0 2rem 2rem 0;
            padding: 1rem 2rem;
        }
        .wordlistitem:hover{
            background-color: #f69b2c;
        }
    .po{
        width: 0;
        height: 0;
    }
    
    .tagword{
        background-color: #019E69;
        background:#019E69;
    }
    .modal_cont{
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
    }
    
    .text_cont,.word_text{
        user-select: text;
     &::selection
        {
            background: #019E69;
            color: #fff;
        }
        ::-moz-selection
        {
            background: #019E69;
            color: #fff;
    
        }
    }
    .green{background: #19C14B;}
    .red{
        background: #FF5252 !important;
    }
    
    .wrong {
        background: #ff525236 !important;
        border: 1px solid #ff525291 !important;
    }
    
    .box_cont{overflow: hidden;}
    
    .topic_cont{
        width: 65%;
    }
    .answer_tit{
        position: relative;
        .last_icon{
            position: absolute;
            left: 0;
            width: 3rem;
            height: 3rem;
        }
        .next_icon{
            position: absolute;
            right: 0;
            width: 3rem;
            height: 3rem;
        }
    }
    .answer_cont{
        width: 35%;
        height: auto;
        overflow: auto;
        background: #F7F8FA;
        padding: 3.5rem 4rem;
        &::-webkit-scrollbar {
            width: 0px;
            height: 1px;
        }
        /* 滑块部分 */
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        /* 轨道部分 */
        &::-webkit-scrollbar-track { 
        //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #fff;
            border-radius: 5px;
        }
        .title{
            width: 13.7rem;
            height: 4rem;
            border-radius: 14.3rem;
            background: rgba(#F69B2C, .1);
            margin: 0 auto;
            position: absolute;
            right: -3rem;
            top: -2.5rem;
            .icon{
                width: 2rem;
                height: 2rem;
                margin-right: 1rem;
            }
            .text{
                font-size: 2rem;
                color: #F69B2C;
            }
        }
        .option_row{
            border: 0.5px solid #019E69;
            border-radius: 4px;
            padding: 2.6rem 2rem;
            margin-top: 2.4rem;
            .option{
                width: 3.8rem;
                height: 3.8rem;
                border-radius: 50%;
                background: #FFFFFF;
                box-sizing: border-box;
                border: 1px solid #019E69;
                margin-right: 3rem;
            }
            .status1{
                background: #019E69;
                color: #fff;
            }
        }
        .status{
            background: rgba(11, 154, 255, 0.1);
        }
        .work_cont{
            margin-top: 3rem;
            .text{margin-top: 1.6rem;}
        }
    }
    .head_cont{
        color: #3A3F5E;
        font-size: 3.2rem;
        line-height: 6.4rem;
        margin-top: 2.4rem;
        user-select: text;
        &::selection
            {
                background: #019E69;
                color: #fff;
            }
            ::-moz-selection
            {
                background: #019E69;
                color: #fff;
    
            }
        .tag{
            width: 5.5rem;
            height: 3.4rem;
            border-radius: 6px;
            color: #fff;
            background: #019E69;
            padding: 5px 7px;
        }
    }
    
    .answer_over{
        padding: 4rem;
        background: #fff;
        color: #9E9E9E;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 4rem;
        .cont{
            // width: 100%;
            margin-top: 5.4rem;
            margin-bottom: 10rem;
            .item{
                width: 6rem;
                height: 6rem;
                border-radius: 50%;
                color: #fff;
                margin-right: 1rem;
                &:last-child(5n){
                    margin-right: 0;
                }
            }
        }
    }
    .info_cont{
        position: fixed;
        min-width: 26.8rem;
        // height: 16.1rem;
        border-radius: 1rem;
        opacity: 1;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
        padding: 0 2.4rem;
        .word{
            color: #3A3F5E;
            padding: 1rem 0;
            border-bottom: 1px solid #F0F2F4;
            line-height: 7rem;
        }
        .word_btn{
            text-align: center;
            color: #019E69;
            // padding: 2.4rem 0;
            line-height: 7rem;
            font-size: 2.2rem;
        }
    }
    .window_cont{
        position: fixed;
        min-width: 42.6rem;
        // height: 16.1rem;
        border-radius: 1rem;
        opacity: 1;
        background: #FFFFFF;
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
        padding: 0 2.4rem;
        .word{
            color: #3A3F5E;
            padding: 1rem 0;
            line-height: 7rem;
            .play_icon{
                width: 3rem;
                height: 3rem;
                margin-left: 1rem;
            }
        }
        .word_btn{
            width: 50%;
            text-align: center;
            color: #019E69;
            // padding: 2.4rem 0;
            line-height: 4rem;
            font-size: 2.2rem;
    
        }
        .word_meaning{
            line-height: 4.8rem;
            max-height: 60vh;
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 4px;
                height: 1px;
            }
            /* 滑块部分 */
            &::-webkit-scrollbar-thumb { 
                border-radius: 5px;
                background-color:#019E69;
            }
            /* 轨道部分 */
            &::-webkit-scrollbar-track { 
            //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                background: #fff;
                border-radius: 5px;
            }
        }
        .wordbtn_cont{
            border-top: 1px solid #F0F2F4;
            padding: 1.5rem 0;
            margin-top: 2.7rem;
        }
        .bl{
            border-left: 0.5px solid #F0F2F4;
        }
    }
    .tit_cont{
        width: 100%;
        padding: 4.2rem 14rem 1.6rem;
        text-align: left;
    }
    .level_cont{
        margin-top: 2rem;
        .print_cont{
            width: 13.6rem;
            height: 4.4rem;
            border-radius: 4px;
            background: #F7F8FA;
            .icon{
                width: 2.4rem;
                height: 2.4rem;
                margin-right: 1rem;
            }
        }
    }
    .level_row{
        color: #626780;
        .level_icon{
            width: 1.8rem;
            height: 1.8rem;
            margin-left: 5px;
            .icon{
                width: 2.4rem;
                height: 2.4rem;
            }
        }
    }
    
    .text_cont{
        padding: 0 14rem;
        font-family: Open Sans;
        font-size: 3.6rem;
        line-height: 7.2rem;
        letter-spacing: 0em;
        text-align: left;
        flex: 1;
        overflow: auto;
        white-space: pre-wrap;
        word-break: break-word;
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
        }
        /* 滑块部分 */
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        /* 轨道部分 */
        &::-webkit-scrollbar-track { 
        //   box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #fff;
            border-radius: 5px;
        }
    }
    .justify-end{padding-left: 2rem}
    
    .btn_cont{
        width: 100%;
        // padding: 2rem calc(20% + 6px) 0;
        // padding: 2rem 71.7rem 0 10rem;
        padding: 4.2rem 2rem;
        // border-top: 1px solid #4762BB;
        border-top: 1px solid #F7F8FA;
        .left_num{
            margin: auto 0;
            font-size: 3.6rem;
            font-weight: bold;
            .num1{
                color: #FF5252;
            }
            .num2{
                color: #767676;
    
            }
        }
    }
    .back_img{
        width: 4rem;
        height: 4rem;
        &:hover{
            content: url(@/assets/img/back_1.png);
        }
    }
    .w-full{
        width: 100%;
        // padding: 1rem 71.7rem 0 10rem;
    }
    .backhover{filter: sepia(1) brightness(50%); cursor: pointer;}
    .backhover:hover{filter: invert(1) brightness(0);}
    </style>